<template>
  <div>
    <div class="img-container" v-loading="loading">
      <div class="icon-image" v-for="(item, index) in iconData" :key="index">
        <div
          @click="iconClick(item)"
          style="position: relative; display: inline-block"
        >
          <el-image
            style="width: 100px; height: 100px"
            :src="item.filePath"
          ></el-image>
          <span
            style="
              position: absolute;
              bottom: 5px;
              right: 5px;
              background-color: rgba(255, 255, 255, 0.7);
              border-radius: 50%;
              padding: 2px;
              height: 20px;
              width: 20px;
              display: flex;
              align-items: center;
              justify-content: center;
            "
            v-if = "selectedIcon.id === item.id"
          >
            <el-icon color="#00ff00"><CircleCheck /></el-icon>
          </span>
        </div>
      </div>
      <div class="icon-image">
        <el-upload
          action=""
          :show-file-list="false"
          :before-upload="beforeImgUpload"
        >
          <el-icon class="icon-image-icon"><Plus /></el-icon>
        </el-upload>
      </div>
    </div>
    <el-button type="primary" @click="() => emit('selectIcon', selectedIcon)" >
      确定
    </el-button>
  </div>
</template>
<script setup>
import { Plus, CircleCheck } from "@element-plus/icons-vue";
import { onMounted, reactive, toRefs, defineEmits } from "vue";
import http from "@/utils/http";
import { ElMessage } from "element-plus";
const emit = defineEmits(["selectIcon"]);
const Data = reactive({
  iconData: "",
  selectedIcon: {},
  loading: true,
});
const { iconData, selectedIcon,loading } = toRefs(Data);
onMounted(() => {
  init();
});

const iconClick = (item) => {
  Data.selectedIcon = item;
  // emit("selectIcon", item);
};
const beforeImgUpload = (file) => {
  const isJPG = file.type === "image/jpeg" || file.type === "image/png" || file.type === "image/jpg" || file.type === "image/gif" || file.type === "image/bmp";
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isJPG) {
    ElMessage.error("上传头像图片只能是 图片 格式!");
    return false;
  }
  if (!isLt2M) {
    ElMessage.error("上传头像图片大小不能超过 2MB!");
    return false;
  }

  const formData = new FormData();
  formData.append("file", file);
  http
    .post("/file/upload_minio", formData)
    .then((res) => {
      if(res.code=='0000'){
        http
        .post("/file/insertFile", {
          fileName: file.name,
          fileType: file.type,
          filePath: "/" + res.data.dir + res.data.fileName,
        })
        .then((res) => {
          console.log(res);
          init();
        })
        .catch((err) => {
          console.log(err);
        });
      }else{
        ElMessage.error(res.message);
      }
    })
    .catch((err) => {
      console.log(err);
    });
  return false;
};
const init = () => {
  http
    .post("/file/list", {})
    .then((res) => {
      res.data.forEach((item) => {
        if (
          item.filePath.startsWith("http://") ||
          item.filePath.startsWith("https://")
        ) {
          return;
        } else {
          item.filePath = process.env.VUE_APP_MINIO_URL + item.filePath;
        }
      });
      Data.iconData = res.data;
      console.log(res);
      Data.loading = false;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>
<style scoped>
.icon-image .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.icon-image {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  display: inline-flex;
  justify-content: center;
  outline: none;
}

.icon-image:hover {
  border-color: var(--el-color-primary);
}

.el-icon.icon-image-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}

.img-container {
  display: flex;
  flex-wrap: wrap;
}
</style>